<div
  bsModal
  #createOrEditModal="bs-modal"
  class="modal fade"
  tabindex="-1"
  role="dialog"
  aria-labelledby="createOrEditModal"
  aria-hidden="true"
  [config]="{ backdrop: 'static' }"
>
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <form *ngIf="active" #editForm="ngForm" novalidate (ngSubmit)="save()" autocomplete="off">
        <div class="modal-header">
          <h4 class="modal-title">
            <span *ngIf="tooling.id">编辑工装</span> <span *ngIf="!tooling.id">创建新的工装</span>
          </h4>
          <button type="button" class="close" (click)="close()" [attr.aria-label]="l('Close')">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>

        <div class="modal-body">
          <div class="row">
            <div class="col-md-4">
              <div class="form-group">
                <label for="title">工装名称 *</label>
                <input
                  id="title"
                  #titleInput="ngModel"
                  type="text"
                  name="title"
                  class="form-control"
                  [(ngModel)]="tooling.title"
                  required
                />
                <validation-messages [formCtrl]="titleInput"></validation-messages>
              </div>
            </div>
            <div class="col-md-4">
              <div class="form-group">
                <label for="category">鉴定类别</label>
                <select class="form-control" name="category" [(ngModel)]="tooling.category" required>
                  <option *ngFor="let item of categorys" value="{{item.value}}">{{ item.displayText }}</option>
                </select>
              </div>
            </div>
            <div class="col-md-4">
              <div class="form-group">
                <label>工装分类 *</label>
                <select class="form-control" name="classificationId" [(ngModel)]="tooling.classificationId" required>
                  <option *ngFor="let item of classifications" value="{{item.value}}">{{ item.displayText }}</option>
                </select>
              </div>
            </div>
          </div>

          <div class="row">
            <div class="col-md-4">
              <div class="form-group">
                <label for="isDrawing">有无图纸</label>
                <div></div>
                <select class="form-control" name="isDrawing" [(ngModel)]="tooling.isDrawing">
                  <option value=""></option>
                  <option value="false">无</option>
                  <option value="true">有</option>
                </select>
              </div>
            </div>
            <div class="col-md-4">
              <div class="form-group">
                <label for="subTitle">工装图号</label>
                <input id="subTitle" type="text" name="subTitle" class="form-control" [(ngModel)]="tooling.subTitle" />
              </div>
            </div>
            <div class="col-md-4">
              <div class="form-group">
                <label for="drawingCodes">对应产品图号</label>
                <input
                  id="drawingCodes"
                  type="text"
                  name="drawingCodes"
                  class="form-control"
                  [(ngModel)]="tooling.drawingCodes"
                />
              </div>
            </div>
          </div>

          <div class="row">
            <div class="col-md-4">
              <div class="form-group">
                <label for="model">产品型号</label>
                <input id="model" type=" text" name="model" class="form-control" [(ngModel)]="tooling.model" />
              </div>
            </div>
            <div class="col-md-4">
              <div class="form-group">
                <label for="stamp">工装钢印号</label>
                <input id="stamp" type=" text" name="stamp" class="form-control" [(ngModel)]="tooling.stamp" />
              </div>
            </div>
            <div class="col-md-4">
              <div class="form-group">
                <label for="location">存放位置</label>
                <input id="location" type=" text" name="location" class="form-control" [(ngModel)]="tooling.location" />
              </div>
            </div>
          </div>

          <div class="row">
            <div class="col-md-4">
              <div class="form-group">
                <label for="manufactureDate">制造日期</label>
                <p-calendar
                  [(ngModel)]="manufactureDate"
                  name="manufactureDate"
                  dateFormat="yy年m月d日"
                  [locale]="primengCalendarHelper['zh-CN']"
                  [inputStyle]="{ width: '240px', height: '40px', 'padding-left': '20px' }"
                  [inputStyleClass]="'form-control'"
                ></p-calendar>
              </div>
            </div>
            <div class="col-md-4">
              <div class="form-group">
                <label for="receiptTime">接收时间</label>
                <p-calendar
                  [(ngModel)]="receiptTime"
                  name="receiptTime"
                  dateFormat="yy年m月d日"
                  [locale]="primengCalendarHelper['zh-CN']"
                  [inputStyle]="{ width: '240px', height: '40px', 'padding-left': '20px' }"
                  [inputStyleClass]="'form-control'"
                ></p-calendar>
              </div>
            </div>
            <div class="col-md-4">
              <div class="form-group">
                <label for="intoStockDate">入库日期</label>
                <p-calendar
                  [(ngModel)]="intoStockDate"
                  name="intoStockDate"
                  dateFormat="yy年m月d日"
                  [locale]="primengCalendarHelper['zh-CN']"
                  [inputStyle]="{ width: '240px', height: '40px', 'padding-left': '20px' }"
                  [inputStyleClass]="'form-control'"
                ></p-calendar>
              </div>
            </div>
          </div>

          <div class="row">
            <div class="col-md-4">
              <div class="form-group">
                <label for="manufacturer">制造单位</label>
                <input
                  id="manufacturer"
                  type="text"
                  name="manufacturer"
                  class="form-control"
                  [(ngModel)]="tooling.manufacturer"
                />
              </div>
            </div>
            <div class="col-md-4">
              <div class="form-group">
                <label for="serialNo">计量单位</label>
                <input id="unit" type="text" name="unit" class="form-control" [(ngModel)]="tooling.unit" />
              </div>
            </div>
            <div class="col-md-4">
              <div class="form-group">
                <label for="groupParts">组配件</label>
                <input
                  id="groupParts"
                  type="text"
                  name="groupParts"
                  class="form-control"
                  [(ngModel)]="tooling.groupParts"
                />
              </div>
            </div>
          </div>

          <div class="row">
            <div class="col-md-4">
              <div class="form-group">
                <label for="certificate">有无合格证</label>
                <div></div>
                <select class="form-control" name="certificate" [(ngModel)]="tooling.certificate">
                  <option value=""></option>
                  <option value="false">无</option>
                  <option value="true">有</option>
                </select>
              </div>
            </div>
            <div class="col-md-4">
              <div class="form-group">
                <label for="handover">有无交接单</label>
                <div></div>
                <select class="form-control" name="handover" [(ngModel)]="tooling.handover">
                  <option value=""></option>
                  <option value="false">无</option>
                  <option value="true">有</option>
                </select>
              </div>
            </div>
            <div class="col-md-4">
              <div class="form-group">
                <label for="toolingRecord">有无履历卡</label>
                <div></div>
                <select class="form-control" name="toolingRecord" [(ngModel)]="tooling.toolingRecord">
                  <option value=""></option>
                  <option value="false">无</option>
                  <option value="true">有</option>
                </select>
              </div>
            </div>
          </div>

          <div class="row">
            <div class="col-md-4">
              <div class="form-group">
                <label for="isVerificationCard">有无检定卡</label>
                <input
                  id="isVerificationCard"
                  type="text"
                  name="isVerificationCard"
                  class="form-control"
                  [(ngModel)]="tooling.isVerificationCard"
                />
              </div>
            </div>
            <div class="col-md-4">
              <div class="form-group">
                <label for="otherInfo">其它资料</label>
                <input
                  id="otherInfo"
                  type="text"
                  name="otherInfo"
                  class="form-control"
                  [(ngModel)]="tooling.otherInfo"
                />
              </div>
            </div>
            <div class="col-md-4">
                <div class="form-group">
                  <label for="toolingSource">工装来源</label>
                  <input
                    id="toolingSource"
                    type="text"
                    name="toolingSource"
                    class="form-control"
                    [(ngModel)]="tooling.toolingSource"
                  />
                </div>
              </div>
          </div>

          <div class="row">
            <div class="col-md-4">
              <div class="form-group">
                <label for="isNeedVerification">需周期鉴定</label>
                <span class="m-switch m-switch--icon m-switch--success" style="display: block;">
                  <label>
                    <input
                      type="checkbox"
                      checked="checked"
                      name="isNeedVerification"
                      [(ngModel)]="tooling.isNeedVerification"
                    />
                    <span></span>
                  </label>
                </span>
              </div>
            </div>
            <div class="col-md-4">
              <div class="form-group">
                <label for="verificationDate">鉴定日期</label>
                <p-calendar
                  [disabled]="!tooling.isNeedVerification"
                  [(ngModel)]="verificationDate"
                  name="verificationDate"
                  dateFormat="yy年m月d日"
                  [locale]="primengCalendarHelper['zh-CN']"
                  [inputStyle]="{ width: '240px', height: '40px', 'padding-left': '20px' }"
                  [inputStyleClass]="'form-control'"
                ></p-calendar>
              </div>
            </div>
            <div class="col-md-4">
              <div class="form-group">
                <label for="nextVerificationDate">鉴定有效期</label>
                <p-calendar
                  [disabled]="!tooling.isNeedVerification"
                  [(ngModel)]="nextVerificationDate"
                  name="nextVerificationDate"
                  dateFormat="yy年m月d日"
                  [locale]="primengCalendarHelper['zh-CN']"
                  [inputStyle]="{ width: '240px', height: '40px', 'padding-left': '20px' }"
                  [inputStyleClass]="'form-control'"
                ></p-calendar>
              </div>
            </div>
          </div>

          <div class="row">
            <div class="col-md-4">
              <div class="form-group">
                <label for="maxLoad">最大载荷</label>
                <input id="maxLoad" type="text" name="maxLoad" class="form-control" [(ngModel)]="tooling.maxLoad" />
              </div>
            </div>
          </div>

          <div class="row">
            <div class="col-md-4">
              <div class="form-group">
                <label for="belongTo">所属资产</label>
                <input id="belongTo" type="text" name="belongTo" class="form-control" [(ngModel)]="tooling.belongTo" />
              </div>
            </div>
            <div class="col-md-4">
              <div class="form-group">
                <label for="responsible">责任人</label>
                <input
                  id="responsible"
                  type="text"
                  name="responsible"
                  class="form-control"
                  [(ngModel)]="tooling.responsible"
                />
              </div>
            </div>
            <div class="col-md-4">
              <div class="form-group">
                <label for="technologist">工艺员</label>
                <input
                  id="technologist"
                  type="text"
                  name="technologist"
                  class="form-control"
                  [(ngModel)]="tooling.technologist"
                />
              </div>
            </div>
          </div>

          <div class="row">
            <div class="col-md-12">
              <div class="form-group">
                <label for="maxLoad">备注</label>
                <textarea
                  id="remark"
                  class="form-control"
                  type="text"
                  name="remark"
                  [(ngModel)]="tooling.remark"
                  rows="3"
                ></textarea>
              </div>
            </div>
          </div>

          <div class="modal-footer">
            <button [disabled]="saving" type="button" class="btn btn-default" (click)="close()">
              {{ l('Cancel') }}
            </button>
            <button
              type="submit"
              class="btn btn-primary blue"
              [disabled]="!editForm.form.valid"
              [buttonBusy]="saving"
              [busyText]="l('SavingWithThreeDot')"
            >
              <i class="fa fa-save"></i> <span>{{ l('Save') }}</span>
            </button>
          </div>
        </div>
      </form>
    </div>
  </div>
</div>
